<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城后台首页</title>
    <link rel="stylesheet" href="./static/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./static/css/index.css" media="all">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <img src="./static/images/logo.png"/>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航）
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./static/images/tx.jpg" class="layui-nav-img">
                    MrShun
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">修改头像</a></dd>
                    <dd><a href="">登录记录</a></dd>
                    <dd><a id="updatePass" href="javascript:;">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item nav-split"></li>
            <li class="layui-nav-item pos" title="消息">
                <img src="./static/icon/bell.svg"/>
                <span class="circle-badge">5</span>
                <dl class="layui-nav-child">
                    <dd><a href="">订单信息</a></dd>
                    <dd><a href="">订单信息</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item nav-split"></li>
            <li class="layui-nav-item" title="打开主页"><img src="./static/icon/home.svg"/></li>
            <li class="layui-nav-item nav-split"></li>
            <li class="layui-nav-item" title="刷新缓存"><img src="./static/icon/brush.svg"/></li>
            <li class="layui-nav-item nav-split"></li>
            <li class="layui-nav-item" title=""><img src="./static/icon/exit.svg"/></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="menu">
                <li>
                    <div class="title" title="订单管理"><img class="icon" src="static/icon/order.svg"/>订单管理<span
                            id="icon"></span></div>
                    <ul class="submenu">
                        <li title="订单列表"><img class="icon" src="./static/icon/list.svg"/>订单列表</li>
                        <li title="退款申请"><img class="icon" src="./static/icon/refund.svg"/>退款申请</li>
                    </ul>
                </li>
                <li>
                    <div class="title" title="商品管理"><img class="icon" src="static/icon/goods.svg"/>商品管理<span
                            id="icon"></span></div>
                    <ul class="submenu">
                        <li data-url="page/goods/add.html" title="添加商品"><img class="icon" src="./static/icon/add.svg"/>添加商品
                        </li>
                        <li data-url="page/goods/list.html" title="商品管理"><img class="icon"
                                                                              src="./static/icon/list.svg"/>商品管理
                        </li>
                        <li title="待审商品"><img class="icon" src="./static/icon/check.svg"/>待审商品</li>
                        <li title="用户评论"><img class="icon" src="./static/icon/comment.svg"/>用户评论</li>
                    </ul>
                </li>
                <li>
                    <div class="title" title="用户管理"><img class="icon" src="static/icon/user.svg"/>用户管理<span
                            id="icon"></span></div>
                    <ul class="submenu">
                        <li data-url="page/member/list.html" title="用户列表"><img class="icon"
                                                                               src="./static/icon/list.svg"/>用户列表
                        </li>
                        <li title="数据分析"><img class="icon" src="./static/icon/analysis.svg"/>数据分析</li>
                    </ul>
                </li>
                <li>
                    <div class="title" title="门店管理"><img class="icon" src="static/icon/store.svg"/>门店管理<span
                            id="icon"></span></div>
                    <ul class="submenu">
                        <li data-url="page/order/main.html" title="创建门店"><img class="icon" src="./static/icon/add.svg"/>创建门店
                        </li>
                        <li title="门店列表"><img class="icon" src="./static/icon/list.svg"/>门店列表</li>
                        <li title="门店设置"><img class="icon" src="./static/icon/set.svg"/>门店设置</li>
                    </ul>
                </li>
                <li>
                    <div class="title" title="系统设置"><img class="icon" src="static/icon/config.svg"/>系统配置<span
                            id="icon"></span></div>
                    <ul class="submenu">
                        <li data-url="page/system/category.html" title="分类管理"><img class="icon"
                                                                                  src="./static/icon/cate.svg"/>分类管理
                        </li>
                        <li data-url="page/system/set.html" title="平台配置"><img class="icon" src="./static/icon/set.svg"/>平台配置</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-breadcrumb" style="visibility: visible;">
                <a href="javascript:;">闲蛋后台</a><span lay-separator="">/</span>
                <a id="fun" href="javascript:;">首页</a><span lay-separator="">/</span>
                <a><cite>数据分析</cite></a>
            </div>
            <div class="page"></div>
        </div>
    </div>

    <!--<div class="layui-footer">-->

    <!--</div>-->
</div>
<div id="update-pass-box" style="display: none">
    <form class="layui-form layui-form-pane" lay-filter="category">
        <div style="padding: 10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">登录账号</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="登录账号" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">输入密码</label>
                <div class="layui-input-block">
                    <input type="password" name="catName" autocomplete="off" lay-verify="required|number"
                           placeholder="输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确定密码</label>
                <div class="layui-input-block">
                    <input type="password" name="linkUrl" autocomplete="off" placeholder="输入确定密码" class="layui-input">
                </div>
            </div>
        </div>
    </form>
</div>
<script src="./static/js/jquery.min.js"></script>
<script src="./static/plugins/layui/layui.all.js"></script>
<script src="./static/js/app.js"></script>
<script>
    $(function () {
        //手风琴导航栏效果
        $("ul.menu>li>div.title").click(function () {
            var _that = $(this).parent();
            var sub = _that.find("ul.submenu");
            if (_that.hasClass("active")) {
                sub.slideUp(300, function () {
                    _that.removeClass("active");
                });
                _that.find("span#icon").html('<i class="layui-icon">&#xe602;</i>');
            } else {
                _that.siblings().removeClass("active").find("ul.submenu").slideUp(200, function () {
                    _that.siblings().removeClass("active");
                });
                _that.siblings().find("span#icon").html('<i class="layui-icon">&#xe602;</i>');
                sub.slideDown(300, function () {
                    _that.addClass("active");
                });
                _that.find("span#icon").html('<i class="layui-icon">&#xe61a;</i>');
            }
        });
        //二级子菜单选择
        $("ul.submenu>li").click(function () {
            var _that = $(this).parents("li").find("div.title");
            $("ul.menu").find("ul.submenu>li").siblings().removeClass("active");
            $(this).addClass("active");
            $(".layui-breadcrumb").find("#fun").text(_that.attr("title"));
            $(".layui-breadcrumb").find("cite").text($(this).attr("title"));
        });
        //加载html页面
        var load = function (url) {
            $("body").append('<div class="loading"><div class="loading-box"><img src="./static/images/loading.svg" /><img class="logo" src="./static/images/loading-logo.png"></div></div>');
            $("div.page").load(url, function () {
                setTimeout(function () {
                    $("div.loading").remove();
                }, 1000);
            });
        }

        //点击子菜单li, 加载page页面到main里面
        $("ul.submenu>li").click(function () {
            //获取 li里面的data-url
            var url = $(this).attr("data-url");
            if (url && url.length) {
                load(url);
                //保存localStorage
                localStorage.setItem("data-url", url);
            } else
                alert("没有配置 data-url");
        });

        var dataUrl = localStorage.getItem("data-url");
        load(dataUrl == null ? "page/index/main.html" : dataUrl);

        //默认展开第一个
        $("ul.menu>li:eq(0)>div.title").trigger("click");

        //修改密码
        $("a#updatePass").click(function () {
            //自定页
            layer.open({
                type: 1,
                resize: false,
                title: '<img src="static/icon/create.svg"/> 修改密码',
                btn: ['Ok', 'Cancel'],
                content: $('#update-pass-box').html(),
                yes: function (index) {

                }
            });
        });
    });
</script>
</body>
</html>